<template>
	<view class="container">
		<view class="pay-heared">
			<view class="pay-dis">
				应付金额：<text class="num">&yen;{{orderInfo.payprice}}</text>
			</view>
		</view>
		<view class="pay-info">
			<view class="pay-info-item">
				<view class="hd">
					产品名称：
				</view>
				<view class="bd" v-if="orderInfo.productname">
					{{orderInfo.productname}}
					<view v-if="orderInfo.suit_name">({{orderInfo.suit_name}})</view>
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					产品编号：
				</view>
				<view class="bd">
					{{orderInfo.series_number}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					订单号：
				</view>
				<view class="bd">
					{{orderInfo.ordersn}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					下单时间：
				</view>
				<view class="bd" v-if="orderInfo.addtime">
					{{ get_date_format(orderInfo.addtime) }}
				</view>
			</view>
		</view>

		<radio-group name="paytype" @change="paywayChange">
			<view class="pay-way  mb-20">
				<block v-for="(item,index) in pay_method" :key="index">
					<view class="pay-way-item">
						<view class="hd" v-if="item.pinyin == 'wechat'"><image :src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'wechat_icon.png'" mode="aspectFit"></image></view>
						<view class="hd" v-if="item.pinyin == 'alipay'"><image :src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'alipay_icon.png'" mode="aspectFit"></image></view>
						<view class="bd">
							<view class="pay-type" v-if="item.pinyin == 'wechat'">微信</view>
							<view class="pay-type" v-if="item.pinyin == 'alipay'">支付宝</view>
							<view class="pay-radio">
								<label class="radio">
									<radio class="radio-size-base" color="#2dbb55" name="paytype" :value="item.pinyin" /><text></text>
								</label>
							</view>
						</view>
					</view>
				</block>
			</view>
		</radio-group>
		
		<!-- 底部操作按钮 -->
		<footer-fixed-bar :isShadow="false" :isBackground="false">
			<view class="footer-alone-btn-default " @click="payorder">
				<view class="text" :class="submitStatus? '' : 'btn-disabled'">立即支付</view>
			</view>
		</footer-fixed-bar>
		
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import footerFixedBar from "@/components/footer-fixed-bar.vue";
	import {
		isWxClient,
		get_date_format
	} from "@/utils/utils.js";
	import {
		getOrderDetailPage
	} from "@/utils/toPath.js";
	export default {
		components: {
			footerFixedBar,
			uniPopup
		},
		data() {
			return {
				orderInfo: {},
				pay_method: {},
				submitStatus: false,
				pay_method:[
					{
						pinyin:'wechat',
						name:'微信'
					},{
						pinyin:'alipay',
						name:'支付宝'
					}
				],
				sysConfig:{
					cfg_pay_xianxia:''
				},
				pay_type: ''
			}
		},
		onLoad(options) {
			// 检查是否是微信端
			this.isWxClient = isWxClient();
			//信息设置
			if (options.ordersn) {
				this.ordersn = options.ordersn;
			}
		},
		onShow() {
			if (this.ordersn) {
				this.getOrderDetail();
			} else {
				uni.showToast({
					title: '参数信息有误',
					icon: 'none'
				})
			}
		},
		methods: {
			
			// 获取订单支付信息详情
			async getOrderDetail(){
				let params = {
					method: 'api/v2/payment/index/index',
					ordersn: this.ordersn,
					is_wx_client: this.isWxClient ? 1 : 0
				};
				uni.showLoading({
					title: '加载中...'
				})
				let res = await this.$http(params);
				uni.hideLoading();
				if (res.status){
					// 已支付
					if (res.data.is_payed == 1) {
						uni.redirectTo({
							url: `/pages/order/paysuccess?ordersn=${this.ordersn}&orderid=${res.data.id}`
						})
						return;
					}
					
					this.orderInfo = res.data.info;
				}else{
					this.errPath(res);
				}
			},
			
			// 获取系统配置
			async getSysConfig(){
				let params = {
					method: 'api/v2/system/get_sys_configs',
					filed:"cfg_pay_xianxia"
				};
				let res = await this.$http(params);
				if(res.status)
				{
					this.sysConfig = res.data;
				}
			},
			
			// 获取日期格式
			get_date_format(time){
				return get_date_format(time, "yyyy-MM-dd hh:mm:ss");
			},
			
			// 切换支付方式
			paywayChange(e){
				this.submitStatus = true;
				if(e.detail.value == 'wechat'){
					this.pay_type = 'wechat';
				}
				if(e.detail.value == 'alipay'){
					this.pay_type = 'alipay';
				}
			},
			
			//立即支付
			async payorder(){
				if(this.pay_type == 'alipay'){
					this.alipayPay();
				}
				if(this.pay_type == 'wechat'){
					this.wechatPay();
				}
			},
						
			//支付宝支付
			async alipayPay(){
				let params = {
					method: 'api/v2/payment/app/get_pay_data',
					pay_type: this.pay_type,
					ordersn: this.ordersn
				};
				let res = await this.$http(params);
				if(res.data.body){
					// console.log(res);
					let that = this;
					let orderInfo = res.data.body;
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: orderInfo, 
						success: function (res) {
							if(res){
								uni.reLaunch({
									url:`/pages/order/paysuccess?orderid=${that.orderInfo.id}&ordersn=${that.ordersn}&pay_type=${that.pay_type}`
								})
							}
						},
						fail: function (err) {
							setTimeout(function(){
								uni.redirectTo({
									url:`/pages/order/payfail?orderid=${that.orderInfo.id}&ordersn=${that.ordersn}`
								})
							},1000);
							
						}
					});
				}
			},
			
			//微信支付
			async wechatPay(){
				let params = {
					method: 'api/v2/payment/app/get_pay_data',
					pay_type: this.pay_type,
					ordersn: this.ordersn
				};
				 let res = await this.$http(params);
				if(res.data){
					console.log(res.data);
					let orderInfo = res.data;
					uni.requestPayment({
						"provider": "wxpay", 
						"orderInfo": {
							"appid": orderInfo.appid,
							"noncestr": orderInfo.noncestr,
							"package": orderInfo.package,
							"partnerid": toString(orderInfo.partnerid),
							"prepayid": orderInfo.prepayid,
							"timestamp": orderInfo.timestamp,
							"sign": toString(orderInfo.sign)
						},
						success: function (res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function (err) {
							// console.log('fail:' + JSON.stringify(err));
						}
					})
				}
			},
			
			// 订单状态错误页面跳转
			errPath(errData){
				let data = errData.data ? errData.data : '',
					errmsg = errData.msg,
					path = `/pages/order/payerr?errmsg=${errmsg}`;
				if (data.sign) {
					if (data.sign == 24 && data.id) { // 支付成功
						uni.redirectTo({
							url: `/pages/order/paysuccess?ordersn=${this.ordersn}&orderid=${data.id}`
						})
						return;
					}
				}

				uni.redirectTo({
					url: path
				});
			},
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
	}

	.pay-heared {
		height: 100rpx;
		padding: 80rpx 44rpx 20rpx;
		background: url(https://static.member.stourweb.cn/uniapp/static/images/h5_pay_bg.jpg) center no-repeat;
		background-size: cover;
		font-weight: bold;
		.pay-dis {
			font-size: 32rpx;
			color: $uni-text-color-inverse;

			text {
				color: #fff100;
				font-family: Arial, Helvetica, sans-serif;
			}
		}
	}

	.mb-20 {
		margin-bottom: 20rpx !important;
	}

	.iconfont {
		margin-left: 10rpx;
		color: $uni-color-primary;
		vertical-align: middle;
	}

	.pay-info {
		margin: 0 $uni-spacing-col-lg;
		background: $uni-bg-color;
		border-radius: 8rpx;
		padding: $uni-spacing-row-sm;
		position: relative;
		display: block;
		z-index: 1;
		top: -40rpx;

		.pay-info-item {
			display: flex;
			font-size: $uni-font-size-base;
			padding: 16rpx 0;

			.hd {
				color: $uni-text-color-grey;
				width: 144rpx;
				flex: 0 0 auto;
			}

			.bd {
				color: $uni-text-color;
				word-break: break-all;
				flex: 1 1 auto;
			}
		}
	}

	.pay-way {
		margin: 0 $uni-spacing-col-lg;
		background: $uni-bg-color;
		border-radius: 8rpx;
		padding: 0 $uni-spacing-row-sm;

		.pay-way-item {
			display: flex;
			font-size: $uni-font-size-base;
			padding: 34rpx 0;
			position: relative;

			&::after {
				content: '';
				display: block;
				width: calc(100% - 62rpx);
				background-color: $uni-border-color;
				height: 2rpx;
				transform: scale(1, 0.5);
				position: absolute;
				bottom: 0;
				left: 62rpx;
			}

			&:last-child::after {
				content: '';
				display: none;
			}

			.hd {
				width: 62rpx;
				flex: 0 0 auto;

				image {
					width: 48rpx;
					height: 36rpx;
				}
			}

			.bd {
				flex: 1 1 auto;
				color: #000000;
				font-size: $uni-font-size-base;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	// 底部独立按钮
	.footer-alone-btn-default {
		text-align: center;
		padding: 0 25rpx 22rpx;
		background: $uni-bg-color-grey;

		.text {
			background: #ff6913;
			padding: 24rpx 0;
			color: $uni-text-color-inverse;
			border-radius: $uni-border-radius-lg;
			font-size: $uni-font-size-lg;
		}

		.btn-disabled {
			background: #999999;
		}
	}
</style>
